<template>
  <div class="like">
    <h4>猜你喜欢</h4>
    <div class="count-box" >
      <div class="count" v-for="item2 in xihuan" :key="item2.gid">
        <div class="img">
          <img
            :src="item2.img.img_url"
            alt=""
          />
        </div>
        <div class="text1">雷米高 澳丽得 牛肉深海鱼油成犬粮 20kg...</div>
        <div class="text2">
          <span
            >全体型
            <i>|</i>
          </span>
          <span>
            成犬
            <i>|</i>
          </span>
          <span> 牛肉 </span>
        </div>
        <div class="price">
          <span>￥</span>
          <span>239.00</span>
          <span>降￥30</span>
          <span>...</span>
        </div>
        <div class="ru">
          <img
            src="https://img2.epetbar.com/nowater/2019-12/24/15/f21e0cf044f2fc066ba22850b59a6c3a.png"
            alt=""
            class="img1"
          />
          <div class="ru-text">
            <span>
              <img
                src="https://img2.epetbar.com/nowater/2019-12/24/16/441af4aaab5be5a2ef56822c060c804d.png"
                alt="" class="img2"
              />
            </span>
            <span> 入选他家的狗为什么毛色这么好！榜单 </span>
            <span>
              <img
                src="https://static.epetbar.com/epet_wap_img/index/arrow.png"
                alt="" class="img3"
              />
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    props: {
    xihuan: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="scss" scoped>
.like {
  z-index: 99999;
  background-color: palegreen;
  width: 375px;
  height: 200px;
  margin-top: 70px;
  h4 {
    margin-left: 12px;
  }
  .count-box {
    display: flex;
    .count {
      width: 172px;
      height: 304px;
      background-color: white;
      .img {
        img {
          width: 162px;
          height: 162px;
        }
      }
      .text1 {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 12px;
        margin-top: 5px;
      }
      .text2 {
        width: 91px;
        height: 16px;
        border: 1px solid #666;
        border-radius: 3px;
        font-size: 10px;
      }
      .price {
        margin-top: 5px;
        box-sizing: border-box;
        display: flex;
        span:nth-child(1) {
          color: red;
          font-size: 12px;
          font-weight: 700;
        }
        span:nth-child(2) {
          color: red;
          font-size: 14px;
          font-weight: 700;
        }
        span:nth-child(3) {
          color: white;
          font-size: 10px;
          background: url(http://static.epetbar.com/epet_wap_img/index/textbg1.png)
            no-repeat;
          min-width: 50px;
          background-size: 100% 100%;
          margin-left: 2px;
          height: 16px;
          line-height: 16px;
          text-align: center;
        }
        span:nth-child(4) {
          margin-left: 30px;
        }
      }
      .ru {
        position: relative;
        width: 172px;
        height: 49px;
        left: 0px;
        .img1 {
          width: 172px;
          height: 49px;
           position: relative;
        width: 172px;
        height: 49px;
        left: 0px;
        top: 0px;

        }

        .ru-text {
          font-size: 13px;
          width: 172px;
          height: 21px;
          position: absolute;
          left: 0px;
          top: 0px;
          span:nth-child(2) {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-size: 12px;
            font-weight: 700;
            width: 120px;
            height: 21px;
            display: inline-block;
            position: absolute;
            left: 12px;
          }
             span:nth-child(3) {
           position: absolute;
           left: 137px;
           top: 0px;
            display: inline-block;
            width: 4px;
            height: 7px;
            .img3{
               width: 4px;
            height: 7px;
            }
          }
          .img2 {
            width: 12px;
            height: 13px;
            position: absolute;
            left: 0px;
            top: 0px;
          }
        }
      }
    }
  }
}
</style>